<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>生产过程管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="../css/layui.css" rel="stylesheet">
	<link href="../css/style.css" rel="stylesheet">
	<script src="../dist/xm-select.js"></script>
</head>

<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
			<!-- 头部区域（可配合layui 已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<!-- 移动端显示 -->
				<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
					<i class="layui-icon layui-icon-spread-left"></i>
				</li>

			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
					<a href="javascript:;">
						<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
						tester
					</a>
					<dl class="layui-nav-child">
						<dd><a href="javascript:;">个人设置</a></dd>
						<dd><a href="javascript:;">退出</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
					<a href="javascript:;">
						<i class="layui-icon layui-icon-more-vertical"></i>
					</a>
				</li>
			</ul>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">

				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item">
						<a class="" href="javascript:;">人员信息管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('person_list.html');">人员信息管理</a></dd>
							<dd><a href="javascript:goPage('');">人员信息编辑</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;">物料信息管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('material_list.html');">物料信息管理</a></dd>
							<dd><a href="javascript:goPage('');">物料信息编辑</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">设备信息管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('device_list.html');">设备信息管理</a></dd>
							<dd><a href="javascript:;">设备信息编辑</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">产品型号管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('product_list.html');">产品信息管理</a></dd>
							<dd><a href="javascript:goPage('');">产品信息编辑</a></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<blockquote class="layui-elem-quote layui-text">
					<span class="layui-breadcrumb">
						<a href="">物料信息</a>
						<a><cite>物料信息管理</cite></a>
					</span>
				</blockquote>

				<!-- 查询条件表单  -->
				<form class="layui-form layui-row layui-col-space16" lay-filter='search-form' action="#">
					<div class="layui-col-md2">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-username"></i>
							</div>
							<input type="text" name="itemId" placeholder="物料编号" class="layui-input" lay-affix="clear">
						</div>
					</div>
					<div class="layui-col-md2">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-date"></i>
							</div>
							<input type="text" id="itemName" name="itemName" placeholder="物料名称"
								class="layui-input demo-table-search-date">
						</div>
					</div>
					<div class="layui-col-md2">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-read"></i>
							</div>
							<input type="text" name="itemClasses" placeholder="材料类型" class="layui-input" lay-affix="clear">
						</div>
					</div>

					<!-- <div class="layui-col-md3" id="itemClasses" name="itemClasses">
					</div> -->
					
					<div class="layui-col-md2">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-edit"></i>
							</div>
							<input type="text" name="vendorName" placeholder="供应商" class="layui-input" lay-affix="clear">
						</div>
					</div>
					<div class="layui-col-md2">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-edit"></i>
							</div>
							<input type="text" name="phoneNumber" placeholder="手机号" class="layui-input" lay-affix="clear">
						</div>
					</div>
					<div class="layui-col-md2">
						<div class="layui-input-wrap">
							<button id="btn_task_search" class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
							<a href="javascript:void(0)" id="btn_task_add" class="layui-btn layui-bg-blue">添加</a>
						</div>
					</div>
				</form>

				<!--
                            列表展示
			-->
				<table class="layui-table" id="task-table-search"></table>



			</div>
		</div>
	</div>
	<!-- 底部页脚部分 -->
	<div class="footer">
		<p class="text-center">
			2024 &copy;
		</p>
	</div>
</body>
<div id="editBox" style="display: none;">
	<form class="layui-form" lay-filter='task-form' action="#">
		<div class="layui-form-item">
			<label class="layui-form-label width120">物料编号</label>
			<div class="layui-input-inline">
				<input type="text" name="itemId" lay-verify="required" placeholder="请输入物料编号" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label width120">物料名称</label>
			<div class="layui-input-inline">
				<input type="text" name="itemName" lay-verify="required" placeholder="请物料名称" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label width120">材料类型</label>
				<div class="layui-input-inline">
					<input type="text" name="itemClasses" lay-verify="required" placeholder="请选择材料类型"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label width120">供应商</label>
			<div class="layui-input-inline">
				<input type="text" name="vendorName" lay-verify="required" placeholder="请输入供应商名称" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label width120">厂址</label>
			<div class="layui-input-inline">
				<input type="text" name="site" lay-verify="required" placeholder="请输入厂址" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label width120">入库时间</label>
				<div class="layui-input-inline layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-date"></i>
					</div>
					<input type="text" name="inboundTime" id="inboundTime" lay-verify="date" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label width120">联系人</label>
			<div class="layui-input-inline">
				<input type="text" name="contact" lay-verify="required" placeholder="请输入联系人" autocomplete="off"
					class="layui-input">
			</div>
		</div>
	
		<div class="layui-form-item">
			<label class="layui-form-label width120">手机号 </label>
			<div class="layui-input-inline">
				<input type="text" name="phoneNumber" lay-verify="required" placeholder="请输入联系人手机号" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<!-- <div class="layui-form-item">
			<label class="layui-form-label width120">家庭住址 </label>
			<div class="layui-input-inline">
				<input type="text" name="address" lay-verify="" placeholder="请输入家庭住址" autocomplete="off"
					class="layui-input">
			</div>
		</div> -->
		<div class="layui-form-item">
			<label class="layui-form-label width120">物料说明</label>
			<div class="layui-input-inline">
				<input type="text" name="itemDescription" lay-verify="" placeholder="请输入物料说明" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
	<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
  </div>
</script>

<script type="text/javascript" src="../js/layui.js"></script>
  <!-- 引入插件 -->
  <script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
  <!-- 渲染页面 -->
  <script type="text/javascript">
  var demo1 = xmSelect.render({
	  // 这里绑定css选择器
	  el: '#itemClasses', 
	  // 渲染的数据
	  data: [
		  {name: '金属', value: '金属',},
		  {name: '合金', value: '合金',},
		  {name: '复合材料', value: '复合材料' },
		  {name: '其它', value: '其它'},
	  ],
  })
  </script>
<script>
	layui.use(function () {
		var laydate = layui.laydate;
		var dropdown = layui.dropdown;
		var $ = layui.$;
		var layer = layui.layer;
		var util = layui.util;
		var table = layui.table;
		var form = layui.form;

		// 渲染
		laydate.render({
			elem: '#task_start'
		});
		laydate.render({
			elem: '#task_end'
		});
		laydate.render({
			elem: '#inboundTime'
		});

		// 创建表格实例
		let mainTable = table.render({
			id: 'test1',
			elem: '#task-table-search',
			url: 'http://localhost:8888/materialSearchTask', // 此处为静态模拟数据，实际使用时需换成真实接口
			cols: [[
				{ field: 'id', title: 'ID', width: 80, sort: true, fixed: true },
				{ field: 'itemId', title: '物料编号', minWidth: 110 },
				{ field: 'itemName', title: '物料名称', minWidth: 100, sort: true },
				{ field: 'itemClasses', title: '材料类型', minWidth: 100 },
				{ field: 'vendorName', title: '供应商', minWidth: 100 },
				{ field: 'site', title: '地址', minWidth: 100 },
				{ field: 'inboundTime', title: '入库时间', minWidth: 100 },
				{ field: 'contact', title: '联系人', minWidth: 100 },
				{ field: 'phoneNumber', title: '手机号', minWidth: 120 },
				{ field: 'itemDescription', title: '物料说明', minWidth: 120 },
				{ fixed: 'right', title: '操作', minWidth: 125, toolbar: '#barDemo' }
			]],

			page: true,
			height: 'full'
		});


		// 触发单元格工具事件
		table.on('tool(test1)', function (obj) { // 双击 toolDouble
			// 触发单元格工具事件
			var rowData = obj.data; // 获得当前行数据
			console.log(rowData)
			if (obj.event === 'update') {
				let editBox = layer.open({
					title: `<button type="button" class="layui-btn layui-bg-gray">
							<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>物料信息编辑</b> 
						  </button>
					`,
					type: 1,
					area: ['600px', '500px'],
					content: $('#editBox').html(),
					success: function () {
						// 对弹层中的表单进行初始化渲染
						form.render();
						// 表单提交事件
						form.on('submit(form-submit)', function (data) {
							var field = data.field; // 获取表单字段值
							// 显示填写结果，仅作演示用
							layer.alert(JSON.stringify(field), {
								title: '当前填写的字段值'
							});
							// 此处可执行 Ajax 等操作
							var data = layui.form.val('task-form');
							$.ajax({
								url: 'http://localhost:8888/materialSaveTask',
								method: 'GET',
								datatype: 'json',
								data: {
									id: rowData.id,
									itemId: field.itemId,
									itemName: field.itemName,
									phoneNumber: field.phoneNumber,
									itemClasses: field.itemClasses,
									vendorName: field.vendorName,
									site: field.site,
									inboundTime: field.inboundTime,
									contact: field.contact,
									itemDescription: field.itemDescription,
									// : field.address,
									// introduction: field.introduction
								},
								success: function (e) {
									layer.msg('操作成功！');
									// console.log(e);
									layer.close(editBox);   // 关闭对话框
									mainTable.reload(); // 重新加载表格数据
								}

							});
							return false; // 阻止默认 form 跳转
						});
					}
				});

				//对表单元素进行赋值
				layui.form.val('task-form', {
					"id": rowData.id,
					"itemId": rowData.itemId,
					"itemName": rowData.itemName,
					"phoneNumber": rowData.phoneNumber,
					"itemClasses": rowData.itemClasses,
					"vendorName": rowData.vendorName,
					"site": rowData.site,
					"inboundTime": rowData.inboundTime,
					"contact": rowData.contact,
					"itemDescription": rowData.itemDescription
					// "introduction": rowData.introduction
				});

				laydate.render({
					elem: '#edit_task_start'
				});
				laydate.render({
					elem: '#edit_task_end'
				});
				laydate.render({
					elem: '#inboundTime'
				});


				// 删除按钮的处理	
			} else if (obj.event === 'delete') {
				layer.confirm('确定要删除该行数据吗？', function (index) {
					$.ajax({
						url: "http://localhost:8888/materialDelTask",
						type: "post",
						// datatype: "json",
						data: {
							id: rowData.id,
						},
						success: function (e) {
							layer.msg('操作成功！');
							// console.log(e);
							mainTable.reload(); // 重新加载表格数据
						}
					});
				});
			}
		}); // end table.on('tool(test1)')

		$('#btn_task_add').click(function () {
			laydate.render({
					elem: '#inboundTime'
				});
			editBox = layer.open({
				
			
				title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>物料信息添加</b> 
					  </button>
				`,
				type: 1,
				area: ['600px', '500px'],
				content: $('#editBox').html(),
				success: function () {
					// 对弹层中的表单进行初始化渲染
					form.render();
					// 表单提交事件
					form.on('submit(form-submit)', function (data) {
						var field = data.field; // 获取表单字段值
						// 显示填写结果，仅作演示用
						layer.alert(JSON.stringify(field), {
							title: '当前填写的字段值'
						});
						// 此处可执行 Ajax 等操作
						var data = layui.form.val('task-form');
						$.ajax({
							url: 'http://localhost:8888/materialSaveTask',
							method: 'GET',
							datatype: 'json',
							data: {
									id: 0,
									itemId: field.itemId,
									itemName: field.itemName,
									phoneNumber: field.phoneNumber,
									itemClasses: field.itemClasses,
									vendorName: field.vendorName,
									site: field.site,
									inboundTime: field.inboundTime,
									contact: field.contact,
									itemDescription: field.itemDescription,
							},
							success: function (e) {
								layer.msg('操作成功！');
								// console.log(e);
								layer.close(editBox);   // 关闭对话框
								mainTable.reload(); // 重新加载表格数据
							}

						});
						return false; // 阻止默认 form 跳转
					});
				}
			});
			laydate.render({
					elem: '#inboundTime'
				});
		});
		

		// 搜索提交
		form.on('submit(demo-table-search)', function (data) {
			var field = data.field; // 获得表单字段
			// 执行搜索重载
			table.reload('test1', {
				page: {
					curr: 1 // 重新从第 1 页开始
				},
				where: field // 搜索的字段
			});
			layer.msg('搜索成功<br>');
			return false; // 阻止默认 form 跳转
		});
	}); // end layui.use(.....)
</script>
<script>
	
    function remove(id) {
        if (confirm("确定是否要删除？")) {
            window.location.href = '/task/delete?id=' + id;
        }
    }
    function goPage(url) {
        window.location.href = url;
    }
        
</script>
</html>